<template>
  <el-amap
    class="map"
    :vid="'amap'"
    :zoom="10"
    style="width: 100%; height: 300px"
  >
    <!-- 这里用于点击时的标点 -->
    <el-amap-marker
      v-for="(marker, index) in markers"
      :key="index"
      @click="fansiduf(markers)"
      :position="marker"
      :events="marker.events"
      :icon="marker.icon"
    ></el-amap-marker>
    <el-amap-info-window
      :position="infoWindowPosition"
      :visible="infoWindowVisible"
      @close="handleInfoWindowClose"
      @open="handleInfoWindowOpen"
    >
      <div ref="chartContainer" style="width: 200px; height: 200px"></div>
    </el-amap-info-window>
  </el-amap>
</template>
 
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      infoWindowPosition: [116.397428, 39.90923], // 信息窗体的位置坐标
      infoWindowVisible: false, // 信息窗体的显示状态
      chartInstance: null, // echarts实例
      markers: [
        [116.397428, 39.90923],
        [121.59996, 31.197646],
        [121.52738, 31.217422],
      ],
    };
  },
  mounted() {
    this.point();
    this.init();
  },
  methods: {
    point() {
      let markers = [];
      let windows = [];
      let that = this;
      let pointMarker = [
        {
          lng: 121.536477,
          lat: 31.26924,
          url: "../../assets/logo.png",
          title: "this is title",
          text: "aaaaa",
        },
        {
          lng: 121.538097,
          lat: 31.126337,
          url: "../../assets/logo.png",
          title: "this is title",
          text: "bbbbb",
        },
      ];
      pointMarker.forEach((item, index) => {
        markers.push({
          position: [item.lng, item.lat],
          // icon:item.url, //不设置默认蓝色水滴
          events: {
            click() {
              that.windows.forEach((window) => {
                window.visible = false; //关闭窗体
              });
              that.window = that.windows[index];
              that.$nextTick(() => {
                that.window.visible = true; //点击点坐标，出现信息窗体
              });
            },
          },
        });
        windows.push({
          position: [item.lng, item.lat],
          content: "<div id='content'>" + item.text + "</div>", //内容
          offset: [5, -15], //窗体偏移
          visible: false, //初始是否显示
        });
      });
      //  加点
      this.markers = markers;
      //加弹窗
      this.windows = windows;
    },
    init() {
      document
        .getElementsByTagName("div")[0]
        .addEventListener("click", function (e) {
          console.log(77777);
        });
    },
    handleInfoWindowOpen() {
      console.log("adas");
      this.infoWindowVisible = true;
      this.$nextTick(() => {
        // 确保DOM已经更新
        this.createChart();
      });
    },
    handleInfoWindowClose() {
      this.infoWindowVisible = false;
      if (this.chartInstance) {
        this.chartInstance.dispose(); // 销毁echarts实例
      }
    },
    createChart() {
      if (this.$refs.chartContainer) {
        this.chartInstance = echarts.init(this.$refs.chartContainer);
        const option = {
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: "Search Engine" },
                { value: 735, name: "Direct" },
                { value: 580, name: "Email" },
                { value: 484, name: "Union Ads" },
                { value: 300, name: "Video Ads" },
              ],
            },
          ],
        };
        this.chartInstance.setOption(option);
      }
    },
  },
};
</script>
 
<style>
.map {
  width: 100%;
  height: 400px;
}
</style>